<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item
      ><i
          class="iconfont icon-r-shield"
          style="margin: 5px; font-size: 22px"
      >
        缴费信息</i
      ></el-breadcrumb-item
      >
    </el-breadcrumb>
    <!-- 卡片视图区域 -->

    <el-card>
      <el-row>
        <el-col :span="24">
          <div class="left">
            <div class="top">
              <el-row>
                <el-col :span="24" style="text-align: center">
                  <i
                      class="iconfont icon-r-shield"
                      style="font-size: 32px"
                  >
                    账户余额</i
                  >
                </el-col>
              </el-row>
              <div class="count" v-if="userInfo.money">
                <span class="num">￥</span>
                <span class="num">{{
                    userInfo.money.toFixed(2)
                  }}</span>
              </div>
              <br/>
              <el-button
                  class="pay-btn"
                  style="font-size: 22px"
                  type="primary"
                  @click="toPay"
              ><i
                  class="iconfont icon-r-add"
                  style="font-size: 22px"
              ></i
              >
                立即充值
              </el-button
              >
            </div>
          </div>
        </el-col>
        <hr/>
        <el-col :span="24">
          <div class="bottom">
            <el-row>
              <el-col :span="24" style="text-align: left">
                <i
                    class="iconfont icon-r-refresh"
                    style="font-size: 32px; font-weight: 600"
                >
                  待缴费</i
                >
              </el-col>
            </el-row>

            <el-row style="font-weight: 600; font-size: 22px;margin-top: 10px;">
              <el-col :span="6"> 区域</el-col>
              <el-col :span="4"> 车位号</el-col>
              <el-col :span="8"> 时间</el-col>
              <el-col :span="6"> 操作</el-col>
            </el-row>
            <el-row v-for="res in dRes" :key="res.id">
              <el-col :span="6">
                                <span class="area">{{
                                    res.stall.stallArea
                                  }}</span>
              </el-col>
              <el-col :span="4">
                <samp class="stall-num">{{
                    res.stall.stallNum
                  }}</samp>
              </el-col>
              <el-col :span="8">
                                <span class="create-time">{{
                                    res.createTime
                                  }}</span>
              </el-col>
              <el-col :span="6">
                <el-button
                    style="margin-top: -15px;font-size: 18px"
                    type="success"
                    size="type"
                    @click="payStall(res)"
                ><i
                    class="iconfont icon-r-yes"
                    style="font-size: 18px"
                ></i
                > 缴费
                </el-button
                >
              </el-col>
            </el-row>
            <div v-if="dRes.length == 0" class="no-res">
              没有相关记录
            </div>
          </div>
        </el-col>
        <hr/>
        <el-col :span="24">
          <div class="right">
            <el-row>
              <el-col :span="24" style="text-align: left">
                <i
                    class="iconfont icon-r-paper"
                    style="font-size: 32px; font-weight: 600"
                >
                  停车缴费记录</i
                >
              </el-col>
            </el-row>
            <el-row style="font-weight: 600; font-size: 22px;margin-top: 10px;">
              <el-col :span="6"> 区域</el-col>
              <el-col :span="4"> 车位号</el-col>
              <el-col :span="8"> 时间</el-col>
              <el-col :span="6"> 费用</el-col>
            </el-row>
            <el-row v-for="item in allStallRes" :key="item.id">
              <el-col :span="6">
                                <span class="area">{{
                                    item.stall.stallArea
                                  }}</span>
              </el-col>
              <el-col :span="4">
                <samp class="stall-num">{{
                    item.stall.stallNum
                  }}</samp>
              </el-col>
              <el-col :span="8">
                                <span class="create-time">{{
                                    item.createTime
                                  }}</span>
              </el-col>
              <el-col :span="6">
                                <span
                                    class="money"
                                    v-if="
                                        item.money != undefined &&
                                        item.money != null
                                    "
                                >缴费：{{ item.money.toFixed(2) }}元</span
                                >
                <span class="money num-red" v-else
                >待缴费：{{
                    feeChange(item).toFixed(2)
                  }}元</span
                >
              </el-col>
            </el-row>
            <div v-if="allStallRes.length == 0" class="no-res">
              没有相关记录
            </div>
          </div>
        </el-col>
      </el-row>
    </el-card>

    <el-dialog
        title="充值"
        :visible.sync="payShow"
        width="500px"
        center
        @close="payClose"
    >
      <!-- 内容主题区域 -->
      <el-input
          v-model.number="payMoney"
          @blur="checkMoney"
          placeholder="充值金额"
          style="width: 300px"
      ></el-input>
      <br/>
      <span class="pay-msg" v-if="msgShow">{{ payMsg }}</span>
      <!-- 底部区域 -->
      <span slot="footer" class="dialog-footer">
                <!-- <el-button @click="payClose" style="font-size: 18px;"><i class="iconfont icon-r-left" style="font-size: 22px;"></i> 取消</el-button> -->
                <el-button type="primary" @click="payClick">确认充值</el-button>
            </span>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "Cost",
  data() {
    return {
      allStallRes: [],
      userInfo: {},
      payShow: false,
      payMoney: "",
      payMsg: "",
      msgShow: false,
      dRes: [],
    }
  },
  mounted() {
    const user = JSON.parse(sessionStorage.getItem("user"))
    this.getAllStallRes(user.username);
    this.getUserNoPay(user.username);
  },
  methods: {
    // 获取用户所有停车缴费记录
    getAllStallRes(uid) {
      axios.get("/api/stall/allRes?person=" + uid).then(response => {
        this.allStallRes = response.data.data;
      });
    },
    // 获取用户未停车缴费未支付的订单
    getUserNoPay(uid) {
      axios.get("/api/stall/allNoPay?person=" + uid).then(response => {
        this.dRes = response.data.data;
      });
    },
/*    getUserStallRes(uid) {
      axios.get("/api/stall/allRes?uid=" + uid).then((res) => {
        this.yRes = res.data.data;
      });
    },*/
    feeChange(stallRes) {
      let startTime = new Date(stallRes.createTime);
      let endTime = new Date();
      let hours = (endTime.getTime() - startTime.getTime()) / 3600000;
      return (Math.floor(hours * 10) / 10) * stallRes.stall.stallMoney;
    },
    toPay() {
      this.payMoney = "";
      this.payShow = true;
    },
    checkMoney() {
      if (typeof this.payMoney === "number") {
        this.msgShow = false;
        this.payMsg = "";
      } else {
        this.msgShow = true;
        this.payMsg = "请输入正确的金额数值";
      }
    },
    payClick() {
      if (typeof this.payMoney === "number") {
        const uid = JSON.parse(sessionStorage.getItem("user")).uid
        axios.post("/api/user/userPay", {
          uid: uid,
          money: this.payMoney,
        }).then((res) => {
          if (res.data.data) {
            this.$message.success("充值成功！");
            this.payClose();
          } else {
            this.$message.error("充值失败，请重新尝试");
          }
        });
      } else {
        this.$message.info("输入金额错误，充值失败！");
        this.payClose();
      }
    },
    payClose() {
      this.payShow = false;
      this.msgShow = false;
      this.payMsg = "";
    },
    async payStall(stallRes) {
      const re = await this.$confirm(
          "该次停车缴费" + this.feeChange(stallRes) + "元?",
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }
      ).catch((err) => err);
      // console.log(re)
      if (re !== "confirm") {
        this.$message.info("已取消停车缴费！");
      } else {
        let oa = {};
        oa.pid = stallRes.pid;
        oa.person = stallRes.person;
        oa.stallId = stallRes.stallId;
        oa.money = this.feeChange(stallRes);

        axios.post("/api/stall/payMoneyPerson", oa).then((res) => {
          if (res.data.data.flag) {
            this.$message.success("停车缴费成功！");
            this.getAllStallRes(this.userInfo.username);
            this.getUserNoPay(this.userInfo.username);
          } else {
            this.$message.error(res.data.data.msg);
          }
        });
      }

    },

  }
}
</script>

<style scoped>
.top {
  height: 200px;
}

.top h2 {
  text-align: center;
  color: rgb(102, 102, 102);
}

.count {
  text-align: center;
}

.num {
  font-size: 34px;
}

.text {
  font-size: 20px;
}

.pay-btn {
  margin-left: 50%;
  width: 180px;
  transform: translateX(-90px);
}

.bottom {
}

.bottom h2 {
  text-align: center;
  color: rgb(102, 102, 102);
}

.right {
}

.el-row {
  height: 50px;
}

.right h2 {
  text-align: center;
  font-size: 24px;
  color: rgb(107, 107, 107);
}

.pay-msg {
  color: red;
  font-size: 12px;
}

.stall-num {
  font-size: 16px;
}

.num-red {
  color: red;
}

.no-res {
  width: 100%;
  height: 150px;
  line-height: 150px;
  text-align: center;
  color: rgb(203, 199, 199);
  font-size: 24px;
}
</style>
